<template>
  <div class="media_video">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
      <div v-if="!($store.state.device === 'APP')" class="btn_right">
        <a :href="'/media-find?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_22.png" alt=""></a>
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
      </div>
    </div>
    <div :class="$store.state.device !== 'APP'?'video_html' : 'video_html app_nav'">
      <iframe :src="videoUrl" scrolling="no" frameborder="0"></iframe>
    </div>
    <div class="footer_body">
      <div class="title_text">视屏简介</div>
      <p class="text_title">{{articleList.content}}</p>
    </div>
    <!--<div class="footer_bottom_body">
      <div class="text_title">{{articleList.title}}</div>
      <div class="right_body">
        <div class="item_span" @click="setLikeVideo(articleList.id, articleList)"><i class="iconfont icon-dianzan1"></i>{{articleList.agree ? articleList.agree : 0}}</div>
      </div>
    </div>-->
    <!--分享弹窗-->
    <div v-if="addressShow" class="share_btn_img" @click="addressShow = false">
      <img src="../../../assets/img/modules/media/icon_xq_16.png" alt="">
    </div>
    <!--遮罩层-->
    <drag-loding v-if="showLoding"></drag-loding>
    <!--分享有礼-->
<!--    <a href="javascript:;" @click="openShareModel"  class="share_model_btn"><img src="../../../assets/img/modules/media/icon_v2_7.png" alt=""></a>-->
  </div>
</template>
<script>
import dragLoding from '@/components/loding'
import wxapi from '@/utils/wxapi.js'
import mediaMixins from '@/utils/modules/media'
export default {
  mixins: [mediaMixins],
  name: 'media_video',
  components: {
    dragLoding
  },
  data () {
    return {
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      value: '',
      shareUrl: '',
      addressShow: false,
      footerShow: false,
      showLoding: true, // loading效果
      articleId: 0,
      videoUrl: 0,
      articleList: {},
      commentList: [],
      isComment: false,
      commemtData: {
        postId: 0, // 文章ID
        content: '' // 评论内容
      },
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {
    '$route' (val) {
      history.go(0)
    }
  },
  methods: {
    /*
       *@author wf_Huang
       *@Time 2019/8/20 0020 13:10
       *@function  调用分享
       *****************************************/
    openShareModel () {
      this.shareAPPorWx()
    },
    /*
       *@author wf_Huang
       *@Time 2019/8/15 0015 16:46
       *@function  判断分享使用 app分享还是wx接口
       *****************************************/
    shareAPPorWx () {
      if (this.$store.state.device === 'WX') {
        this.addressShow = true
      } else if (this.$store.state.device === 'APP') {
        try {
          // eslint-disable-next-line no-undef
          Phone.inShare(this.shareUrll, this.articleList.post.postTitle, this.articleList.post.postTitle, this.articleList.avatar)
        } catch (e) {}
      }
    },
    wxRegCallback () {
      // 用于微信JS-SDK回调
      this.wxShareTimeline()
      this.wxShareAppMessage()
    },
    wxShareTimeline () {
      // 微信自定义分享到朋友圈
      let option = {
        title: this.articleList.title, // 分享标题, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.articleList.thumb, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.addressShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareTimeline(option)
    },
    wxShareAppMessage () {
      // 微信自定义分享给朋友
      let option = {
        title: this.articleList.title, // 分享标题, 请自行替换
        desc: this.articleList.content, // 分享描述, 请自行替换
        link: this.shareUrl, // 分享链接，根据自身项目决定是否需要split
        imgUrl: this.articleList.thumb, // 分享图标, 请自行替换，需要绝对路径
        success: () => {
          this.addressShow = false
        },
        error: () => {
          this.$toast('已取消分享')
        }
      }
      // 将配置注入通用方法
      wxapi.ShareAppMessage(option)
    },
    /*
         *@author wf_Huang
         *@Time 2019/8/13 0013 8:42
         *@function  查询视屏详情
         *****************************************/
    getArticleIdDetail () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/courses/getCourseInfo?id=${this.articleId}&openid=${this.$store.state.openid}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 200) {
          this.$toast('视屏详情查询失败~')
          return false
        }
        this.articleList = res.data
        this.commemtData.postId = this.articleList.id
        // 拼接分享地址
        this.setUrl()
        // 文章阅读数加一
        this.addNumebr()
      }).catch(() => {})
    },
    /*
         *@author wf_Huang
         *@Time 2019/8/13 0013 22:57
         *@function  文章阅读数加一
         *****************************************/
    addNumebr () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wppostmeta/addPostmeta?postId=${this.articleId}`,
        method: 'post',
        withCredentials: false
      }).then(({ data: res }) => {
      }).catch(() => {})
    },
    /*
         *@author wf_Huang
         *@Time 2019/8/13 0013 10:00
         *@function  评论
         *****************************************/
    setComment () {
      if (this.commemtData.content === '') {
        this.$toast('请输入评论内容~')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpcomments/addComment?postId=${this.commemtData.postId}&content=${this.commemtData.content}`,
        method: 'post',
        data: {
          fansDvice: this.$store.state.device, // APP/WX/H5
          fansChannel: this.$store.state.gsign, // 渠道标识(gkzx)
          fansUniacId: this.$store.state.uniacid, // 微信ID(渠道ID)
          fassLogo: this.$store.state.media.logoUrl, // 渠道logo
          fansShareId: this.$store.state.media.shareId, // 分享者ID
          openid: this.$store.state.openid
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('文章评论失败~')
          return false
        }
        this.$toast('评论成功')
        this.commemtData.content = ''
        this.getCommentList()
      }).catch(() => {})
    },
    setUrl () {
      // 分享地址
      this.shareUrl = `${window.SITE_CONFIG['Url']}media-video?device=WX&gsign=${this.$store.state.gsign}&uniacid=${this.$store.state.uniacid}&shareId=${this.$store.state.media.shareId}&articleId=${this.$store.state.media.articleId ? this.$store.state.media.articleId : this.articleList.post.id}&id=${this.articleList.post.id}`
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#ffffff')
    this.getUrlData()
    this.articleId = this.$route.query.id || 0
    this.videoUrl = this.$route.query.videoUrl || 0
    this.getArticleIdDetail()
    wxapi.wxRegister(this.wxRegCallback)
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .media_video {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          &:nth-child(1){
            img{
              width: 36px;
              height: 34px;
            }
          }
          &:nth-child(2){
            img{
              width: 34px;
              height: 34px;
            }
          }
          &:nth-child(3){
            img{
              width: 34px;
              height: 34px;
            }
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .video_html{
      position: fixed;
      top: 98px;
      left: 0;
      right: 0;
      height: 350px;
      iframe{
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }
    .footer_body{
      padding: 450px 0 100px;
      .title_text{
        padding: 32px 20px;
        font-size: 34px;
        color: #222222;
        font-weight: bold;
        border-bottom: 1px solid #efefef;
      }
      .text_title{
        font-size: 28px;
        color: #333333;
        padding: 0 30px;
      }
    }
    .footer_bottom_body{
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: 0 2px 12px 0 rgba(153, 153, 153, 0.14);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      padding: 18px 32px;
      .text_title{
        font-size: 32px;
        font-weight: bold;
        color: #333333;
      }
      input{
        background: #F3F3F3;
        border-radius: 32px;
        width: 420px;
        height: 64px;
        font-size: 28px;
        border: 0;
        padding: 0 35px;
        &::placeholder{
          text-align: center;
          font-size: 28px;
          color: #666666;
        }
      }
      .right_body{
        font-size: 24px;
        color: #999999;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item_span{
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          height: 30px;
          margin-left: 20px;
          img{
            margin-right: 5px;
          }
          &:nth-child(1){
            font-size: 24px;
            img{
              width: 28px;
              height: 28px;
            }
          }
        }
        .active{
          color: #027FFE;
        }
      }
    }
    .share_btn_list{
      display: flex;
      .share_item{
        text-align: center;
        flex: 1;
        img{
          width: 100px;
          height: 100px;
          border-radius: 100%;
          display: block;
          margin: 50px auto 0;
        }
        p{
          font-size: 24px;
          color: #000000;
          margin: 10px 0;
        }
      }
    }
    .share_btn_out{
      background: #F2F2F2;
      border-radius: 4px;
      width: 686px;
      height: 96px;
      font-size: 32px;
      color: #666666;
      border: 0;
      margin: 40px auto 0;
      display: block;
    }
    .share_model_btn{
      position: fixed;
      right: 30px;
      bottom: 20%;
      img{
        width: 142px;
        height: 147px;
      }
    }
  }
</style>
